import HeaderList from "../components/HeaderList";
import styles from "../css/Personal.module.scss";
import { useSelector } from "react-redux";
import { IStore } from "../redux/typings";
import { Card, Image, Upload, Modal, Form, Input, Button, message } from "antd";
import { PlusOutlined } from '@ant-design/icons';
import PersonalInfoItem from "../components/PersonalInfoItem";
import { formatTimestamp } from "../utils/tools"
import { updateUserInfoAsync } from "../redux/userSlice"
import { useDispatch } from "react-redux";
import { useState } from "react";
import { checkPassword } from "../api/personal";

const Personal = () => {

    const dispatch = useDispatch();

    const { userInfo } = useSelector((state: IStore) => state.user)
    const handleAvatar = (value: string, key: string) => {
        // 将仓库和服务器端端数据一起更新
        dispatch((updateUserInfoAsync as any)({
            userId: (userInfo as any)._id,
            newInfo: {
                [key]: value
            }
        }))
        message.success('更新头像成功')
    }
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [panelName, setPanelName] = useState("")
    const [passwordInfo, setPasswordInfo] = useState({
        oldPassword: "", //旧密码
        newPassword: "",//新密码
        passwordConfirm: "", //确认密码
    })
    // 存储用户修改的项 editInfo---> {qq:'123456'}
    const [editInfo, setEditInfo] = useState({});

    const showModal = (name: string) => {
        setPanelName(name)
        // 将上次提交的内容清空
        setEditInfo({})
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
        dispatch((updateUserInfoAsync as any)({
            userId: (userInfo as any)._id,
            newInfo: editInfo
        }))
        message.success('更新信息成功')
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    /**
     * 验证用户输入的旧密码是否正确
     */
    async function checkPasswordIsRight() {
        if (passwordInfo.oldPassword) {
            const { data } = await checkPassword((userInfo as any)._id, passwordInfo.oldPassword);
            if (!data.data) {
                // 说明密码不正确
                return Promise.reject("密码不正确");
            }
        }
    }

    // 用户输入密码时，更新对应的状态
    const updatePasswordInfo = (newInfo: string, key: string) => {
        const newPasswordInfo = { ...passwordInfo };
        newPasswordInfo[key as keyof typeof newPasswordInfo] = newInfo.trim();
        setPasswordInfo(newPasswordInfo)
        if (key === 'newPassword') {
            updateInfo(newInfo, 'loginPwd')
        }
    }

    /**
     * 根据用户的输入更新 editInfo
     */
    function updateInfo(newInfo: string, key: string) {
        if (key === "nickname" && !newInfo) {
            message.warning("昵称不能为空");
            return;
        }
        const newUserInfo: { [key: string]: string } = { ...editInfo };
        newUserInfo[key] = newInfo;
        setEditInfo(newUserInfo);
    }

    let modalContent = null;
    switch (panelName) {
        case "基本信息": {
            modalContent = (
                <>
                    <Form
                        name="basic3"
                        autoComplete="off"
                        initialValues={userInfo}
                        onFinish={handleOk}
                    >
                        {/* 登录密码 */}
                        <Form.Item
                            label="登录密码"
                            name="oldPassword"
                            rules={[
                                { required: true },
                                {
                                    validator: checkPasswordIsRight
                                }
                            ]}
                            validateTrigger='onBlur'
                        >
                            <Input.Password
                                value={passwordInfo.oldPassword}
                                placeholder="如果要修改密码，请先输入旧密码"
                                onChange={(e) => updatePasswordInfo(e.target.value, 'oldpassword')}
                            />
                        </Form.Item>

                        {/* 新的登录密码 */}
                        <Form.Item
                            label="新密码"
                            name="newPassword"
                        >
                            <Input.Password
                                value={passwordInfo.newPassword}
                                placeholder="请输入新密码"
                                onChange={(e) => updatePasswordInfo(e.target.value, 'newpassword')}
                            />
                        </Form.Item>

                        {/* 确认密码 */}
                        <Form.Item
                            label="确认密码"
                            name="passwordConfirm"
                            rules={[
                                { required: true },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('newpassword') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('两次密码不一致'));
                                    },
                                }),
                            ]}
                            validateTrigger='onBlur'
                        >
                            <Input.Password
                                placeholder="请确认密码"
                                value={passwordInfo.passwordConfirm}
                                onChange={(e) => updatePasswordInfo(e.target.value, 'passwordConfirm')}
                            />
                        </Form.Item>

                        {/* 用户昵称 */}
                        <Form.Item
                            label="用户昵称"
                            name="nickname1"
                            initialValue={userInfo.nickname}
                        >
                            <Input
                                placeholder="昵称可选，默认为新用户"
                                value={userInfo.nickname}
                                onBlur={(e) => updateInfo(e.target.value, 'nickname')}
                            />
                        </Form.Item>

                        {/* 确认修改按钮 */}
                        <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>

                            <Button type="link" htmlType="submit" className="resetBtn">
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </>

            )
            break;
        }
        case "社交账号": {
            modalContent = (
                <>
                    <Form
                        name="basic2"
                        initialValues={userInfo}
                        autoComplete="off"
                        onFinish={handleOk}
                    >
                        <Form.Item
                            label="邮箱"
                            name="mail"
                        >
                            <Input
                                value={userInfo.mail}
                                placeholder="请填写邮箱"
                                onChange={(e) => updateInfo(e.target.value, 'mail')}
                            />
                        </Form.Item>
                        <Form.Item
                            label="QQ号"
                            name="qq"
                        >
                            <Input
                                value={userInfo.qq}
                                placeholder="请填写 QQ 号"
                                onChange={(e) => updateInfo(e.target.value, 'qq')}
                            />
                        </Form.Item>
                        <Form.Item
                            label="微信"
                            name="wechat"
                        >
                            <Input
                                value={userInfo.wechat}
                                placeholder="请填写微信号"
                                onChange={(e) => updateInfo(e.target.value, 'wechat')}
                            />
                        </Form.Item>
                        <Form.Item
                            label="github"
                            name="github"
                        >
                            <Input
                                value={userInfo.github}
                                placeholder="请填写 github "
                                onChange={(e) => updateInfo(e.target.value, 'github')}
                            />
                        </Form.Item>

                        {/* 确认修改按钮 */}
                        <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>

                            <Button type="link" htmlType="submit" className="resetBtn">
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </>
            );
            break;
        }
        case "个人简介": {
            modalContent = (
                <>
                    <Form
                        name="basic3"
                        initialValues={userInfo}
                        autoComplete="off"
                        onFinish={handleOk}
                    >
                        {/* 自我介绍 */}
                        <Form.Item
                            label="自我介绍"
                            name="intro"
                        >
                            <Input.TextArea
                                rows={6}
                                value={userInfo.intro}
                                placeholder="选填"
                                onChange={(e) => updateInfo(e.target.value, 'intro')}
                            />
                        </Form.Item>

                        {/* 确认修改按钮 */}
                        <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>

                            <Button type="link" htmlType="submit" className="resetBtn">
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </>
            );
            break;
        }
    }

    return (
        <div>
            <HeaderList title="个人中心" />
            {/* 信息展示 */}
            <div className={styles.container}>
                {/* 基本信息 */}
                <div className={styles.row}>
                    <Card
                        title="基本信息"
                        onClick={() => showModal("基本信息")}
                        extra={(<div className={styles.edit}>编辑</div>)}
                    >
                        <PersonalInfoItem info={{ itemName: "登录账号", itemValue: `${userInfo.loginId}` }} />
                        <PersonalInfoItem info={{ itemName: "账号密码", itemValue: "**** **** ****" }} />
                        <PersonalInfoItem info={{ itemName: "用户昵称", itemValue: `${userInfo.nickname}` }} />
                        <PersonalInfoItem info={{ itemName: "用户积分", itemValue: `${userInfo.points}` }} />
                        <PersonalInfoItem info={{ itemName: "注册时间", itemValue: `${formatTimestamp((userInfo as any).registerDate, "YYYY-MM-DD HH:mm:ss DOW")}` }} />
                        <PersonalInfoItem info={{ itemName: "上次登录时间", itemValue: `${formatTimestamp((userInfo as any).lastLoginDate, "YYYY-MM-DD HH:mm:ss DOW")}` }} />
                        <div style={{ fontWeight: 100, height: "50px" }}>
                            当前头像
                        </div>
                        <Image src={userInfo.avatar} width={100} />
                        <div style={{ fontWeight: 100, height: "50px" }}>
                            上传新头像
                        </div>
                        <Upload
                            action="/api/upload"
                            listType="picture-card"
                            maxCount={1}
                            onChange={(e) => {
                                if (e.file.status === "done") {
                                    // 说明上传完毕
                                    const url = e.file.response.data;
                                    // 处理用户头像的更新
                                    handleAvatar(url, "avatar")
                                }
                            }}
                        >
                            <PlusOutlined />
                        </Upload>
                    </Card>
                </div>
                {/* 社交账号 */}
                <div className={styles.row}>
                    <Card
                        title="社交账号"
                        onClick={() => showModal("社交账号")}
                        extra={(<div className={styles.edit}>编辑</div>)}
                    >
                        <PersonalInfoItem info={{ itemName: "邮箱", itemValue: `${userInfo.mail ? userInfo.mail : "未填写"}` }} />
                        <PersonalInfoItem info={{ itemName: "QQ号", itemValue: `${userInfo.qq ? userInfo.qq : "未填写"}` }} />
                        <PersonalInfoItem info={{ itemName: "微信号", itemValue: `${userInfo.wechat ? userInfo.wechat : "未填写"}` }} />
                        <PersonalInfoItem info={{ itemName: "Github", itemValue: `${userInfo.github ? userInfo.github : "未填写"}` }} />
                    </Card>
                </div>
                {/* 个人简介 */}
                <div className={styles.row}>
                    <Card
                        title="个人简介"
                        onClick={() => showModal("个人简介")}
                        extra={(<div className={styles.edit}>编辑</div>)}
                    >
                        <p className={styles.intro}>
                            {userInfo.intro ? userInfo.intro : "未填写"}
                        </p>
                    </Card>
                </div>
            </div>
            {/* 修改信息对话框 */}
            <Modal title={panelName} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={false}>
                {modalContent}
            </Modal>
        </div>
    );
}

export default Personal;